<template>
  <div class="mapAndMenu">
    <fullmap :mapId="mapId"></fullmap>
    <Menu class="menuDiv" id="menuDiv" :mapId="mapId" :ecchMapList="ecchMapList_1"></Menu>
   <!--  <theme-switch v-if="false" class="theme-componet"></theme-switch> -->
  </div>
</template>

<script>
  import fullmap from './esriMap'
  import Menu from './Menu'
  //
  import themeSwitch from './theme-switch.vue';
  //

  export default {
    name: 'HzMap',
    components: {
      fullmap,
      Menu,
      themeSwitch,
    },
     data () {
       return {
         mapId: 'mainMap',
         ecchMapList_1:{
           menuList:[
             {
               icon:"icon-dingweitu",
               ismenu:true,
               name:"定位",
               code:"position"
             },
             {
               icon:"icon-sousuo",
               ismenu:true,
               name:"搜索",
               code:"search"
             },
             {
               icon:"icon-tuceng",
               ismenu:true,
               name:"图层控制",
               code:"layer"
             },
             {
               icon:"icon-icon-screen-four",
               ismenu:true,
               name:"多图对比",
               code:"compareMorePicture",
               model:false,
               children:[{
                 icon:"icon-duibi",
                 ismenu:true,
                 name:"双图对比",
                 code:"twoPic"
               },
                 {
                   icon:"icon-fourrather",
                   ismenu:true,
                   name:"四图对比",
                   code:"fourPic"
                 }]
             },
             {
               icon:"icon-ditushezhi",
               ismenu:true,
               name:"地图输出",
               code:"mapPrint"
             },
             {
               icon:"icon-measure",
               ismenu:true,
               name:"测量工具",
               code:"measure",
               model:false,
               children:[{
                 icon:"icon-length",
                 ismenu:true,
                 name:"测量距离",
                 code:"measureLine"
               },
                 {
                   icon:"icon-mianji",
                   ismenu:true,
                   name:"测量面积",
                   code:"measurePolygon"
                 }]
             },{
               icon:"icon-jia2",
               ismenu:true,
               name:"数据加载",
               code:"addLayers"
             },
             {
               icon:"icon-dingwei1",
               ismenu:true,
               name:"清除图标",
               code:"clearGraphic"
             },
             {
               icon:"icon-qingchu1",
               ismenu:true,
               name:"清除数据",
               code:"clearLayer"
             },
             {
               icon:"icon-quanping",
               ismenu:true,
               name:"全屏",
               code:"full"
             },
             {
               icon:"icon-bangzhu1",
               ismenu:true,
               name:"帮助",
               code:"help"
             },
             {
               icon:"icon-zhutiqiehuan",
               ismenu:true,
               name:"主题切换",
               code:"theme",
               className:'themeBtn'
             }
           ]
         }
       }
     }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .mapAndMenu {
    height: 100%;
    width: 100%;
  }

  /*#menuDiv {
    z-index: 1000;
    border: 1px solid rgb(215, 214, 216);
    position: absolute;
    left: calc((100% - 680px) / 2);
    bottom: 10px;
    display: block;
    background-color: rgba(255, 255, 255, 0.53)
  }*/

  .menuDiv{
    z-index: 999;
    bottom: 72px;
    position: relative;
    text-align: center;
    margin: auto;
  }
</style>
